
import React from 'react'

class BillLineSettingEdit extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentDidMount() {
    // $(this.refs.BillStartTime).datetimepicker({
    //   format: 'HH:mm',
    //   inline: true
    // });
  }

  componentWillReceiveProps(props) {
    this.setState({
      data: props.data
    })
  }

  onDataSubmit() {
    var data = this.state.data;

    var description = data.description,
        gross_amount = parseFloat(data.gross_amount).toFixed(2),
        tax = parseFloat(data.tax).toFixed(2),
        taxable_amount = parseFloat(data.taxable_amount).toFixed(2)

    if (!description || description.length == 0) {
      alert("请输入描述!")
      return;
    }
    else if (!gross_amount  || gross_amount.length == 0 || isNaN(gross_amount) || gross_amount < 0) {
      alert("请输入正确的总额!")
      return;
    }else if(!tax  || tax.length == 0 || isNaN(tax) || tax < 0){
      alert("请输入正确的税额");
      return;
    }else if(!taxable_amount  || taxable_amount.length == 0 || isNaN(taxable_amount) || taxable_amount < 0){
      alert("请输入正确的不含税额金额");
      return;
    }
    data.gross_amount = gross_amount;
    data.tax = tax;
    data.taxable_amount = taxable_amount;

    if(this.props.isEdit){
      this.props.onEditBillLineData(data);
    }
    else{
      this.props.onCreateBillLineData(data);
    }
  }

  onChange(event, key) {
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })
  }

  render() {
    var self = this;

    return (
      <div className="modal fade" id="BillLineSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="bill-modal-label">账单</h4>
            </div>
            <div className="modal-body">
            <div className="form-group">
              <label for="bill-line-description">描述</label>
              <input ref="billLineDescription" type="text" className="form-control"
                      id="bill-line-description" placeholder="描述" value={self.state.data.description}
                      onChange={(event)=>this.onChange(event, "description")}/>
            </div>
              <div className="form-group">
                <label for="bill-line-taxable-amount">不含税额</label>
                <input ref="billLineTaxableAmount" type="text" className="form-control"
                        id="bill-line-unit-id" placeholder="不含税额" value={self.state.data.taxable_amount}
                        onChange={(event)=>this.onChange(event, "taxable_amount")}/>
              </div>
              <div className="form-group">
                <label for="bill-line-tax">税额</label>
                <input ref="billLineTax" type="text" className="form-control"
                        id="bill-line-tax" placeholder="税额" value={self.state.data.tax}
                        onChange={(event)=>this.onChange(event, "tax")}/>
              </div>

              <div className="form-group">
                <label for="bill-line-gross-amount">总额</label>
                <input ref="billLineGrossAmount" type="text" className="form-control"
                        id="bill-line-gross-amount" placeholder="总额" value={self.state.data.gross_amount}
                        onChange={(event)=>this.onChange(event, "gross_amount")}/>
              </div>
              <div className="form-group">
                <label for="bill-line-expire-date">到期时间</label>
                <input ref="billLineExpireDate" type="datetime-local" className="form-control"
                        id="bill-line-expire-date" placeholder="到期时间" value={self.state.data.expire_date}
                        onChange={(event)=>this.onChange(event, "expire_date")}/>
              </div>

              <input ref="propertyBillId" value={self.state.data.property_bill_id} hidden/>
              <input ref="billLineId" value={self.state.data.id} hidden/>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onDataSubmit()}>保存</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default BillLineSettingEdit
